<!--
 * @Author: MarioGo
 * @Date: 2021-11-10 09:46:17
 * @LastEditTime: 2021-11-20 14:51:36
 * @LastEditors: MarioGo
 * @Description: 文件描述
 * @FilePath: /zheye/src/views/Home.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div class="home-page">
    <section class="py-5 text-center container">
      <div class="row py-lg-5">
        <div class="col-lg-6 col-md-8 mx-auto">
          <img src="../assets/callout.svg" alt="callout" class="w-50" />
          <h2 class="font-weight-light">随心写作，自由表达</h2>
          <h1>{{ Len }}</h1>
          <p>
            <router-link to="/create" class="btn btn-primary my-2">开始写文章</router-link>
          </p>
        </div>
      </div>
    </section>
    <h4 class="font-weight-bold text-center">发现精彩</h4>
    <column-list :list="list"></column-list>
    <div style="text-align: center">
      <button
        class="btn btn-outline-primary mt-2 mb-5 mx-auto btn-block w-25"
        @click="loadMorePage"
        v-if="!isLastPage"
      >
        加载更多
      </button>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted } from 'vue';
import ColumnList from '../components/ColumnList.vue';

import { useStore } from 'vuex';
import { GlobalDataProps } from '../store';
export default defineComponent({
  name: 'home',
  components: {
    ColumnList,
  },
  setup() {
    const store = useStore<GlobalDataProps>();
    //动态拿值
    onMounted(() => {
      store.dispatch('columnActionFetch');
    });
    //计算属性
    const list = computed(() => store.state.columns);
    const loadMorePage = () => {
      console.log('loadmore :>> ');
    };
    const isLastPage = false;

    //vuex getter
    const Len = computed(() => store.getters.biggerColumnsLen);

    return { list, Len, loadMorePage, isLastPage };
  },
});
</script>

<style scoped>
.home {
  height: calc(100vh - 70px - 69px - 24px);
}
</style>
